<template>
  <div class="container">
    <div class="in_progress">
      <div class="header">
        <div class="title">我的考试列表</div>
      </div>
      <div class="body">
        <div class="card_container">
          <div class="exam_card" v-for="(exam,index) in myExamList" :key="index">
            <exam-card :exam="exam" @enterExam="handleEnterExam" @myAnswerDetail="handleMyAnswerDetail"></exam-card>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axiosinstance from '@/util/http'
import examCard from '@/view/Home/components/MineExamination/examCard'

export default {
  name: "MineExamination",
  computed: {},
  data() {
    return {
      myExamList: [],
      page: 1,
      pageSize: 20,
    }
  },
  methods: {
    getMyExamList(){
      axiosinstance.get('/examination/myexamlist', {
        params: {
          page: this.page,
          pageSize: this.pageSize,
          username: this.$store.getters.getuser.username,
        }
      }).then(res => {
        let result = res.data.data;
        let time = new Date();
        //尝试在前端对数据进行排序以达到一个比较良好的展示效果
        let Statues = {
          "FINISHED":0,
          "NOT_START":1,
          "DOING":2
        }
        result = result.sort((a,b)=>{
           let statusA = this.getExamStatus(a,time),statusB = this.getExamStatus(b,time);
           //return Statues[statusB] - Statues[statusA];
             if(Statues[statusA]>Statues[statusB]) return -1;
             else if(Statues[statusA]<Statues[statusB]) return 1;
             else return 0;
        });
        this.myExamList = result;
      })


    },
    getExamStatus(exam,time){
      // let Statues = {
      //   "FINISHED":0,
      //   "NOT_START":1,
      //   "DOING":2
      // }
      if(Number(new Date(exam.exam_open_time))>time) return "NOT_START"
      else if(Number(new Date(exam.exam_close_time))>time) return "DOING"
      else if(Number(new Date(exam.exam_close_time))<time) return "FINISHED"
    },
    handleEnterExam(e){
      this.$router.push({name:"answer",query:{exam_id:e.id}});
      console.log(e)
    },
    handleMyAnswerDetail(e){
      console.log(e)
    },

  },
  created() {
    this.getMyExamList();
  },
  components: {
    examCard
  },
}
</script>

<style scoped lang="less">
.container {
  padding: 0 5%;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #e5e5e5;
  position: relative;
  height:100%;

  .in_progress {
    height:100%;
    .header {
      padding: 0.8rem 0;
      .title {
      }
    }
    .body {
      //background:red;
      height:100%;
      padding: 2rem 0;
      position:relative;
      .card_container {
        height:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-items: center;
        margin: 0 auto;
        .exam_card {
          margin: 1%;
          width: 20%;
        }
      }
    }
  }
}

.title {
  margin: 0 auto;
  position: relative;
  right: 3px;
  font-size: 1.3rem;
  font-weight: 800;
  padding: 3px 10px;
  margin: 5px;
  display: inline-block;
}

.header {
  border-bottom: 2px solid;
}

.exam_card {

}
</style>